<template>
	<tm-fullView bgColor="">
		<c-menubars :showback="false" :paddingBottom="0" theme="white" color="white" :flat="true">
			<template #left>
				<view class="px-30 flex flex-center">
					<!-- <tm-icons name="icon-plus-circle-fill" :color="black_theme ? 'grey' : 'orange'" :size="48"></tm-icons> -->
					<view class="relative t-0">
						<uni-icons type="plus-filled" size="34" color="#ff9800"></uni-icons>
					</view>
				</view>
			</template>
			<template slot="default">
				<view>
					<tm-tabs v-model="activeIndex" :shadow="0" :height="80" :font-size="36" :active-font-size="36"
						color="black" font-color="grey-darken-1" active-border-color="orange" :list="list"
						range-key="title" @change="changeTabs"></tm-tabs>
				</view>
			</template>
		</c-menubars>
		<view class="pt-3 pb-n5">
			<template v-if="activeIndex == 1">
				<view class="px-30 flex flex-between">
					<tm-button :width="320" :height="65" :shadow="0" :round="25" theme="orange">
						<text class="pr-10">同城</text>
						<tm-icons name="icon-switch" color="white"></tm-icons>
					</tm-button>
					<tm-button :width="320" :height="65" :shadow="0" :round="25" :plan="true" theme="gray">
						直播
					</tm-button>
				</view>
			</template>
			<template v-if="activeIndex == 0">
				<view class="mt-35"></view>
			</template>
			<c-flowLayout model="desc" ref="wafll" :id="index">
				<template v-slot:left="{hdata}">
					<view class="relative">
						<tm-images :previmage="false" :width="372" :height="hdata.childrenIndex == 0 ? 472 : 542"
							:src="hdata.item.image" model="aspectFill"></tm-images>
						<view class="absolute l-0 b-30 px-30 flex-between flex-shrink"
							style="height: 56rpx;width: 372rpx;box-sizing: border-box;">
							<view class="grey-lighten-3 headimg-body flex flex-center rounded">
								<tm-images :width="52" :round="24" :height="52"
									:src="hdata.item.author.thumbs" model="aspectFill"></tm-images>
							</view>
							<view class="flex flex-center">
								<tm-icons :name="hdata.item.loved.status != 1 ? 'icon-like' : 'icon-heart-fill'" :color="hdata.item.loved.status == 1 ? 'red' : 'white'"></tm-icons>
								<view class="mx-4"></view>
								<text class="text-size-s text-white">2.4w</text>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{hdata}">
					<view class="relative" v-if="hdata">
						<tm-images :previmage="false" :width="372" :height="542" :src="hdata.item.image"
							model="aspectFill"></tm-images>
						<view class="absolute l-0 b-30 px-30 flex-between flex-shrink"
							style="height: 56rpx;width: 372rpx;box-sizing: border-box;">
							<view class="grey-lighten-3 headimg-body flex flex-center rounded">
								<tm-images :width="52" :round="24" :height="52"
									:src="hdata.item.author.thumbs" model="aspectFill"></tm-images>
							</view>
							<view class="flex flex-center">
								<tm-icons :name="hdata.item.loved.status != 1 ? 'icon-like' : 'icon-heart-fill'" :color="hdata.item.loved.status == 1 ? 'red' : 'white'"></tm-icons>
								<view class="mx-4"></view>
								<text class="text-size-s text-white">2.4w</text>
							</view>
						</view>
					</view>
				</template>
			</c-flowLayout>
			<view class="iphone-safe-height"></view>
		</view>
		<view>
			<!-- <text>{{ content }}</text> -->
		</view>
		<c-tabbar :blur="true"></c-tabbar>
	</tm-fullView>
</template>

<script>
	export default {
		data() {
			return {
				content: "",
				activeIndex: 0,
				list: ['发现', '同城'],
				index: 0
			}
		},
		onLoad() {
			console.log(2222);
		},
		onReady() {
			this.getData();
			uni.hideTabBar();
		},
		methods: {
			// 获取瀑布流数据
			getData() {
				this.$nextTick(function() {
					// 像瀑布流添加相关列表数据
					this.$refs.wafll.pushData([{
							image: 'https://img.js.design/assets/img/613f05e5a9696d53260af814.png',
							loved: {
								number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
								status: 1 // 是否已经添加收藏
							},
							author: {
								thumbs: 'https://img.js.design/assets/smartFill/img307164da746310.jpeg'
							}
						},
						{
							image: 'https://img.js.design/assets/smartFill/img279164da731af0.jpeg',
							loved: {
								number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
								status: 0
							},
							author: {
								thumbs: 'https://img.js.design/assets/smartFill/img326164da748e08.jpeg'
							}
						},
						{
							image: 'https://img.js.design/assets/smartFill/img385164da74ff50.jpeg',
							loved: {
								number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
								status: 0
							},
							author: {
								thumbs: 'https://img.js.design/assets/smartFill/img335164da748e08.jpg'
							}
						},
						{
							image: 'https://img.js.design/assets/img/613ed2dba9696d532607d755.png',
							loved: {
								number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
								status: 0
							},
							author: {
								thumbs: 'https://img.js.design/assets/smartFill/img370164da74ff50.jpg'
							}
						},
						{
							image: 'https://img.js.design/assets/smartFill/img383164da74ff50.jpg',
							loved: {
								number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
								status: 0
							},
							author: {
								thumbs: 'https://img.js.design/assets/smartFill/img370164da74ff50.jpg'
							}
						},
						{
							image: 'https://img.js.design/assets/smartFill/img230164da709e38.jpg',
							loved: {
								number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
								status: 0
							},
							author: {
								thumbs: 'https://img.js.design/assets/smartFill/img370164da74ff50.jpg'
							}
						},
					])
				})
			},
			// 选项卡切换事件
			changeTabs(e) {
				if (this.activeIndex != e) {
					this.activeIndex = e;
				}
				if (this.activeIndex == 1) {
					// 模拟同城切换数据加载
					this.$nextTick(() => {
						this.$refs.wafll.clear();
						// 像瀑布流添加相关列表数据
						this.$refs.wafll.pushData([{
								image: 'https://img.js.design/assets/smartFill/img424164da758808.jpg',
								loved: {
									number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
									status: 1 // 是否已经添加收藏
								},
								author: {
									thumbs: 'https://img.js.design/assets/smartFill/img307164da746310.jpeg'
								}
							},
							{
								image: 'https://img.js.design/assets/smartFill/img279164da731af0.jpeg',
								loved: {
									number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
									status: 0
								},
								author: {
									thumbs: 'https://img.js.design/assets/smartFill/img326164da748e08.jpeg'
								}
							},
							{
								image: 'https://img.js.design/assets/smartFill/img385164da74ff50.jpeg',
								loved: {
									number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
									status: 0
								},
								author: {
									thumbs: 'https://img.js.design/assets/smartFill/img335164da748e08.jpg'
								}
							},
							{
								image: 'https://img.js.design/assets/img/613ed2dba9696d532607d755.png',
								loved: {
									number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
									status: 0
								},
								author: {
									thumbs: 'https://img.js.design/assets/smartFill/img370164da74ff50.jpg'
								}
							},
							{
								image: 'https://img.js.design/assets/smartFill/img383164da74ff50.jpg',
								loved: {
									number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
									status: 0
								},
								author: {
									thumbs: 'https://img.js.design/assets/smartFill/img370164da74ff50.jpg'
								}
							},
							{
								image: 'https://img.js.design/assets/smartFill/img230164da709e38.jpg',
								loved: {
									number: 2.4, // 此处仅作为演示，生产环境中请自行转换科学计数等表达形式
									status: 0
								},
								author: {
									thumbs: 'https://img.js.design/assets/smartFill/img370164da74ff50.jpg'
								}
							},
						])
					})
				} else {
					this.getData();
				}
				this.index++;
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.headimg-body {
		width: 56rpx;
		height: 56rpx;
	}
</style>
